<template>
    <ElDialog v-model="dialogVisible" width="600px" :title="title">
        <el-form ref="formRef" :model="validateForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="覆盖名称" prop="age" :rules="{ required: true, message: '请输入覆盖名称' }">
                <el-input v-model="validateForm.age" type="text"/>
            </el-form-item>
            <el-form-item label="标识" prop="age" :rules="{ required: true, message: '请输入标识' }">
                <el-input v-model="validateForm.age" type="text"/>
            </el-form-item>
            <el-form-item label="状态" prop="age" :rules="{ required: true, message: '请选择状态' }">
                <el-radio-group v-model="validateForm.age" class="ml-4">
                    <el-radio label="1">启用</el-radio>
                    <el-radio label="2">停用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="age">
                <el-input v-model="validateForm.age" :rows="2" type="textarea"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <ElButton @click="dialogVisible = false">取消</ElButton>
                <ElButton type="primary" @click="submitForm(formRef)">确定</ElButton>
            </span>
        </template>
    </ElDialog>
</template>
<script setup>
import {ElDialog, ElButton, ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio} from 'element-plus'
import { computed, ref, reactive, onMounted } from 'vue';
const props = defineProps(['modelValue', 'type', 'info'])
const emit = defineEmits(['update:modelValue'])
const formRef = ref()

const validateForm = reactive({
  age: '',
})
const dialogVisible = computed({
    set:(val) => {
        emit('update:modelValue', val)
    },
    get:() => {
        return props.modelValue
    }
})
const title = computed(() => {
    let obj = {add: '新增',edit: '编辑' }
    return obj[props.type]
})
// 提交
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
// 获取详情
const getDetail = () => {}
onMounted(() => {
    if(props.type === 'edit') {getDetail()}
})
</script>